<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>let命令</title>
</head>

<body>
    <h1>let命令</h1>
    <button onclick="change()">let变量</button>
    <button onclick="change2()">区域其他使用let</button>
    <button onclick="change3()">var循环</button>
    <button onclick="change4()">let循环</button>
    <button onclick="change5()">let变量提升</button>
    <button onclick="change6()">let声明提升</button>
</body>

</html>

<script>

    function change() {
        let a = 10;
        var b = 1;
        console.log(a); // 20
        console.log(b); // 2
    }

    function change2() {
        console.log(a); // 10
        console.log(b); // 1
    }

    function change3() {
        var a = [];
        for (var i = 0; i < 10; i++) {
            a[i] = function () {
                console.log(i);
            };
        }
        a[6](); // 10
    }

    function change4() {
        var a = [];
        for (let i = 0; i < 10; i++) {
            a[i] = function () {
                console.log(i);
            };
        }
        a[6](); // 6
    }

    function change5() {
        for (let i = 0; i < 3; i++) {
            let i = 'abc';
            console.log(i);
        }
    }
    // abc
    // abc
    // abc
    //不存在变量提升

    function change6() {
  
            tmp = 'abc'; // ReferenceError
            console.log(tmp); // ReferenceError
            let tmp; // TDZ结束
            console.log(tmp); // undefined
            tmp = 123;
            console.log(tmp); // 123
          // number
        
    }

</script>

<style>
</style>